<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09-自动触发事件</title>
  <script src="jquery.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <script>
    $(function () {
      $("div").on("click", function () {
        $(this).css("background", "skyblue");
      });

      // 1. 自动触发事件
      // a. 元素.事件()
      // $("div").click();

      // b. 元素.trigger("事件")
      // $("div").trigger("click");

      // c. 元素.triggerHanlder("事件")  与其它不同的是不会触发事件本身的默认行为
      $("div").triggerHandler("click");

      $("input").on("focus", function () {
        $(this).val("你好吗");
      })

      // d. 使用前两种方式调用 : 会触发默认行为(光标闪烁)
      // $("input").focus();
      // $("input").trigger("focus");

      // e. 使用triggerHandler调用 : 不会触发默认行为(不闪烁)
      $("input").triggerHandler("focus");
    })
  </script>

</head>

<body>
  <div></div>
  <input type="text">
</body>

</html>